<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性案例</title>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    <script src="js/jquery.js"></script>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el:'#mydiv',
                data:{
                    title:'hello world',
                    num:100
                },
                computed:{
                    //计算属性在缓存数据发生变化时才执行
                    getTitleReverse:function(){
                        console.log('计算属性的方法')
                        return this.title.split(' ').reverse().join(' ')
                    }
                },
                methods:{
                //  hello world =>[hello,world]
                //  [hello,world] =>[world,hello]
                //  [world,hello] => 'world hello'
                    //普通方法始终会调用
                    getReverse(){
                        console.log('普通的方法')
                        return this.title.split(' ').reverse().join(' ')
                    }
                },
            })
        }
    </script>
    <style>

    </style>
</head>
<body>
    <div id="mydiv">
        <span>{{num}}</span>
        <button @click="num++">计数</button>
        <!-- 计算属性方式 -->
      <h1>{{getTitleReverse}}</h1>
        <!-- 普通方法方式 -->
      <h1>{{getReverse()}}</h1>
    </div>
</body>
</html>